<template>
  <el-dialog v-model="show" :title="title" width="1000px" append-to-body :close-on-click-modal="false"
             destroy-on-close
  >
  <h4 class="formTitle">基本信息</h4>
  <div class="formline flex-center">
    <img style="width: 100px;margin-right:10px" :src="form.picUrl"/>
    <el-descriptions style="width:calc( 100% - 110px)" border>
    <el-descriptions-item label="姓名">{{ form.realName }}</el-descriptions-item>
    <el-descriptions-item label="性别">{{ form.sexStr }}</el-descriptions-item>

    <el-descriptions-item label="出生日期">{{ form.birth }}</el-descriptions-item>
   
    <el-descriptions-item label="国籍">{{ form.countryName }}</el-descriptions-item>
    <el-descriptions-item label="民族">{{ form.nation }}</el-descriptions-item>
    <el-descriptions-item label="联系方式">{{ form.phone }}</el-descriptions-item>
    <el-descriptions-item label="证件类型">{{ form.idcTypeStr }}</el-descriptions-item>
    <el-descriptions-item label="证件号码">{{ form.idcCode }}</el-descriptions-item>
  </el-descriptions>
  </div>
   
    <h4 class="formTitle">补充信息</h4>
    <el-row class="mt20" v-if="participantsInfoArr&&participantsInfoArr.length>0">
      <el-col :span="16">
        <el-form ref="dialogRef">
          <el-form-item v-for="(s,index) in participantsInfoArr" :key="index">
            <template #label>
              <span v-if="s.status == 0" class="red">*</span>{{ s.name }}
            </template>
            <el-input v-if="s.type == '0'" v-model="s.value" type="text"/>
            <el-input v-if="s.type == '1'" v-model="s.value" type="number"/>
            <el-select v-if="s.type == '4'" v-model="s.value" class="m-2">
              <el-option v-for="item in s.option" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
            <ImageUpload
                v-if="s.type == '3'" v-model="s.value" :limit="1"
                :is-show-tip="false"
            />
            <!-- 文件 2-->
            <FileUpload v-if="s.type == '2'" v-model="s.fixWxFile" :action="uploadUrl"/>

          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/api/match/pc'
import { certificates } from '@/assets/lib/nation'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
const uploadUrl = ref('/upload/upLoadToFileServer')
const route = useRoute()
const data = reactive({
  form: {},
  show: false,
  countryList: [],
  participantsInfoArr: [],
  title: '',
  groupId: '0'
})
const { form, show, countryList, participantsInfoArr, title, groupId } = toRefs(data)
const matchId = route.params.id
let extraId = 0
let personId
onMounted(() => {
  getCountryList()
})
const open = (params) => {
  // debugger
  show.value = true
  title.value = params.title
  personId = params.personId
  extraId = params.extraId
  participantsInfoArr.value = params.participantsInfoArr
  init()
}
defineExpose({ open })
watch(show, (value) => {
  if (!value) {
    form.value = {}
    participantsInfoArr.value = []
  }
})

function init() {
  match.getPersonInfoById(personId).then(res => {
    form.value = res.data
    if (extraId != 0) {
      getSupplement()
    }
  })
}

function getSupplement() {
  match.getSupplementInfo(extraId).then(res => {
    if (res.data.personInfo) {
      // 补充字段信息
      participantsInfoArr.value = JSON.parse(res.data.personInfo)
      for (var n of participantsInfoArr.value) {
        if (n.type == '3' && n.value.url) {
          // 图片
          n.value = n.value.url
        }
        if (n.type == '2') {
          // 文件
          var arr = [{
            name: n.value.name,
            url: n.value.url
          }]
          n.fixWxFile = arr
        }
      }
    }
  })
}

function getCountryList() {
  match.countryList().then(res => {
    countryList.value = res.data
  })
}

function submitForm() {
  let fileInfo = {}
  for (const n of participantsInfoArr.value) {
    if (n.status == 0 && (!n.value && !n.fixWxFile)) {
      ElMessage.error(`请完善${n.name}信息`)
      return
    }
    if (n.type == '2' && n.fixWxFile) {
      const temp = n.fixWxFile[0].name.split('.')
      fileInfo = {
        url: n.fixWxFile[0].url,
        name: n.fixWxFile[0].name,
        extname: temp[temp.length - 1]
      }
      n.value = fileInfo
    }
  }
  let obj = {}
  if (extraId != '0') { // 修改
    obj = {
      cptId: matchId,
      personId: personId,
      id: extraId,
      personInfo: JSON.stringify(participantsInfoArr.value)
    }
  } else { // 没填过
    obj = {
      cptId: matchId,
      personId: personId,
      personInfo: JSON.stringify(participantsInfoArr.value)
    }
  }
  match.saveSupplementInfo(obj).then(res => {
    show.value = false
    emit('submitForm')
  })
}

function cancel() {
  show.value = false
}
</script>

<style lang="scss">
@import '@/assets/styles/variables.module.scss';
.flex-center{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.threeFour {
  width: 100%;

  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 160px;
  }

  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 160px;
  }
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

.red {
  color: #f56c6c;
}
.el-descriptions__label.el-descriptions__cell.is-bordered-label{
  background:$--color-primary;
  color:#fff;
}
</style>
